{% extends 'zgh0381/base.html' %}

{% block title %}
    Swift网盘管理系统|对象列表
{% endblock title %}

{% block main %}
<ol class="breadcrumb">
    <li><a href="{% url 'zhanggh0381:list_containers' %}"><b id="containername">{{request.session.containername}}</b></a></li>
    <li><a href="#"></a></li>
</ol>
    <div class="col-md-pull-3 pull-right">
       <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#uploadmodal"><i class="glyphicon glyphicon-cloud-upload"></i>上传文件</button>
    </div>
   <table class="table table-hover table-bordered" id="tab">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>对象大小</th>
                    <th>对象创建时间</th>
                    <th>对象文本类型</th>
                    <th>散列</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody >
                  {% for objects in request.session.container_detail%}
                    <tr>
                        <td><p class="text-primary"><img src="/static/img/txt.png"><b>{{ objects.name }}</b></p></td>
                        <td> {{ objects.bytes|filesizeformat}}</td>
                        <td>{{ objects.last_modified }}</td>
                        <td id="content_type">{{ objects.content_type}}</td>
                        <td>{{ objects.hash}}</td>
                        <td>
                        <div class="btn-group">
                              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                操作 <span class="caret"></span>
                              </button>
                              <ul class="dropdown-menu">
                                  <li><a  class="btn_content"><b><i class="glyphicon glyphicon-zoom-in" ></i>查看文件内容</b></a></li>
                                <li><a class="btn_download" href="{% url 'zhanggh0381:object_download' objects.name %}" ><b><i class="glyphicon glyphicon-cloud-download " ></i>下载</b></a></li>
                                <li role="separator" class="divider"></li>
                                <li><a class="btn_delete"><b class="text-danger"><i class="fa fa-trash-o fa-fw"></i>删除</b></a></li>
                              </ul>
                            </div>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

    <script type="text/javascript" >
        //为单个绑定单击事件
		$(document).on("click",".btn_content",function(){
			//1、弹出是否确认删除对话框
             var containerName = document.getElementById("containername").innerText
            var objectname = $(this).parents("tr").find("td:eq(0)").text();
            $.ajax({
                url:"/zgh0381/object_content/",
                type:"POST",
                data:{"container_name": containerName,"objectname":objectname},
                beforeSend: function (xhr, settings) {
                 xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success:function(result) {
                      content = result.objcontent
                      showQuery(content)
                }
            });

		});


		//文件下载
    	$(document).on("click",".btn_download",function(){
    	    var objectname = $(this).parents("tr").find("td:eq(0)").text();
            toastr.success("下载"+objectname+"成功!", "成功")

		});

    </script>

<!-- 上传文件 -->
<div class="modal fade" tabindex="-1" role="dialog" id="uploadmodal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">上传文件到：{{request.session.containername}}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" action="/zgh0381/object_upload/" enctype='multipart/form-data' >
                    {% csrf_token %}
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">文件</label>
                        <div class="col-sm-10">
                            <input type="file" id="file_name" onChange="if(this.value)insertTitle(this.value);" name="file">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">文件名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control"  id="object_name" name="object_name" >
                        </div>
                    </div>
                     <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary upload_btn">上传文件</button>
            </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 文件内容 -->
<div class="modal fade" tabindex="-1" role="dialog" id="detail_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">文件内容</h4>
            </div>
            <div class="modal-body">
                <textarea class="form-control" rows="8" id="obj_contant" readonly="readonly" ></textarea>
                     <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="/static/toastr.js"></script>
<script type="text/javascript" >

		function showQuery(data) {
                $("#obj_contant").val(data);
                // 显示模态框
                $('#detail_modal').modal('show');
        }

        function insertTitle(tValue){
            var t1 = tValue.lastIndexOf("\\");
            var t2 = tValue.lastIndexOf(".");
            if(t1 >= 0 && t1 < t2 && t1 < tValue.length){

                document.getElementById("object_name").value = tValue.substring(t1 + 1);

   }
}
            const fileUploader = document.getElementById('file_name')
            fileUploader.addEventListener('change', (event) => {
                const files = event.target.files;
                console.log('files', files);
            });
            //上传文件后刷新
            $(document).on("click",".upload_btn",function() {
              var containerName = document.getElementById("containername").innerText
              var filename = document.getElementById("object_name").value
              // 上传文件数据
              swal('上传', '上传成功', 'success');
              //刷新
              toastr.success("上传文件成功!", "成功")


            })

      //删除文件
    $(document).on("click",".btn_delete",function(){
            var objectname = $(this).parents("tr").find("td:eq(0)").text();
		    var containerName = document.getElementById("containername").innerText
		     swal({
            title: "你确定要删除吗？",
            text: "删除可就找不回来了哦！",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "删除",
            cancelButtonText: "取消",
            closeOnConfirm: false

      },function () {

                $.ajax({
					url:"/zgh0381/object_delete/",
					type:"POST",
                    data:{"containername": containerName,"objectname":objectname},
                     beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
					success:function(result){

						        //显示处理成功
                                  if(result.info == 1){
                                      swal('删除','文件已删除','success');
                                      toastr.success("删除"+objectname+"成功!", "成功")
                                     }
                                //刷新
                                  $.ajax({
                                        url:"/zgh0381/detail_container/" + containerName,
                                        type:"GET",
                                         beforeSend: function (xhr, settings) {
                                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                                      },
                                        success:function(result) {
                                                window.location.href = "/zgh0381/detail_container/" + containerName;
                                        }
                                });



					        }
				        });
                    })




             })

                toastr.options = { // toastr配置
                        "closeButton": true, //是否显示关闭按钮
                        "debug": false, //是否使用debug模式
                        "progressBar": true, //是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失
                        "showDuration": "2000", //显示的动画时间
                        "hideDuration": "1000 ", //消失的动画时间
                        "timeOut": "2000", //展现时间
                        "extendedTimeOut": "2000", //加长展示时间
                        "showEasing": "swing", //显示时的动画缓冲方式
                        "hideEasing": "linear", //消失时的动画缓冲方式
                        "showMethod": "fadeIn", //显示时的动画方式
                        "hideMethod": "fadeOut" //消失时的动画方式
                    }

</script>

{% endblock main %}


{% block add_publisher %}
    active
{% endblock add_publisher %}